import { createWebHashHistory, createRouter, RouteRecordRaw } from 'vue-router'
// import SimplePinia from '../components/SimplePinia.vue'
import HelloWorld from '../components/HelloWorld.vue'
import ModelValue from '../components/ModelValue.vue'
import PiniaHome from '../views/pinia/PiniaHome.vue'
import CRUD from '../views/demo/CRUD.vue'
import UIHome from '../views/ui/main.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HelloWorld,
  },
  {
    path: '/modelvalue',
    name: 'modelvalue',
    component: ModelValue,
  },
  {
    path: '/CRUD',
    name: 'CRUD',
    component: CRUD,
  },
  {
    path: '/ui',
    name: 'ui',
    component: UIHome,
    children: [
      {
        path: '',
        name: 'demo',
        component: () =>
          import(/* webpackChunkName:"SimplePinia" */ '../views/ui/demo.vue'),
      },
      {
        path: 'card',
        name: 'card',
        component: () =>
          import(/* webpackChunkName:"SimplePinia" */ '../views/ui/card.vue'),
      },
    ],
  },
  {
    path: '/pinia',
    component: PiniaHome,
    children: [
      {
        path: '',
        name: 'SimplePinia',
        component: () =>
          import(
            /* webpackChunkName:"SimplePinia" */ '../views/pinia/SimplePinia.vue'
          ),
      },
      {
        path: 'StoreToRefs',
        name: 'StoreToRefs',
        component: () =>
          import(
            /* webpackChunkName:"StoreToRefs" */ '../views/pinia/StoreToRefs.vue'
          ),
      },
      {
        path: 'ModifyStore',
        name: 'ModifyStore',
        component: () =>
          import(
            /* webpackChunkName:"ModifyStore" */ '../views/pinia/ModifyStore.vue'
          ),
      },
      {
        path: 'StorageStore',
        name: 'StorageStore',
        component: () =>
          import(
            /* webpackChunkName:"StorageStore" */ '../views/pinia/StorageStore.vue'
          ),
      },
      {
        path: 'Getters',
        name: 'Getters',
        component: () =>
          import(/* webpackChunkName:"Getters" */ '../views/pinia/Getters.vue'),
      },
      {
        path: 'UseOtherStore',
        name: 'UseOtherStore',
        component: () =>
          import(
            /* webpackChunkName:"UseOtherStore" */ '../views/pinia/UseOtherStore.vue'
          ),
      },
      {
        path: 'GetterFun',
        name: 'GetterFun',
        component: () =>
          import(
            /* webpackChunkName:"GetterFun" */ '../views/pinia/GetterFun.vue'
          ),
      },
      {
        path: 'UseAction',
        name: 'UseAction',
        component: () =>
          import(
            /* webpackChunkName:"UseAction" */ '../views/pinia/UseAction.vue'
          ),
      },
      {
        path: 'UsePlugin',
        name: 'UsePlugin',
        component: () =>
          import(
            /* webpackChunkName:"UsePlugin" */ '../views/pinia/UsePlugin.vue'
          ),
      },
      {
        path: 'ActionDebounce',
        name: 'ActionDebounce',
        component: () =>
          import(
            /* webpackChunkName:"ActionDebounce" */ '../views/pinia/ActionDebounce.vue'
          ),
      },
      {
        path: 'PersistPlugin',
        name: 'PersistPlugin',
        component: () =>
          import(
            /* webpackChunkName:"PersistPlugin" */ '../views/pinia/PersistPlugin.vue'
          ),
      },
    ],
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})
export default router
